<template>
  <el-form class="E-box-reset">
    <div class="wrap-input">
      <el-input
        v-model="form.user_phone"
        placeholder="请输入手机号"
        @input="import_phone(form.user_phone)"
        :disabled="step==='code'"
      >
        <i slot="prefix" class="el-input__icon el-icon-mobile" />
        <el-tooltip slot="suffix" effect="dark" :content="check.mes" placement="right">
          <i
            :class="check.exist===1?`el-icon-circle-check`:check.exist===0?'el-icon-warning-outline':'el-icon-circle-close'"
            class="icon_state el-input__icon"
          />
        </el-tooltip>
      </el-input>
      <el-input
        v-if="step==='await'"
        v-model="form.user_password"
        placeholder="设置登陆密码，不小于6位"
        type="password"
        show-password
      >
        <i slot="prefix" class="el-input__icon el-icon-lock" />
      </el-input>
      <el-input
        class="wrap-span"
        v-else-if="step==='code'"
        v-model="form.user_code"
        placeholder="填写验证码"
      >
        <i slot="prefix" class="el-input__icon el-icon-key" />
        <span
          v-if="awaitTime"
          :class="`await`"
          slot="suffix"
          class="btn-span el-input__icon"
        >{{`${awaitTime} 秒`}}</span>
        <span
          v-else
          @click="getCode(form.user_phone)"
          slot="suffix"
          class="btn-span el-input__icon"
        >获取验证码</span>
      </el-input>
    </div>
    <p class="wrap-conf">
      <el-checkbox v-model="autologon">自动登陆</el-checkbox>
    </p>
    <div class="wrap-btn">
      <el-button v-if="step==='await'" type="danger" @click="submitForm(form)">重置密码</el-button>
      <el-button
        v-else-if="step==='code'"
        type="danger"
        @click="register(form)"
        :disabled="!form.user_code"
        :loading="load"
      >完成重置</el-button>
      <el-button v-if="step==='await'" @click="$emit('back')">返回</el-button>
      <el-button v-else-if="step==='code'" @click="step='await'">返回上一步</el-button>
    </div>
  </el-form>
</template>

<script>
export default {
  props: ['tcp'],
  mounted() {
    this.import_phone(this.form.user_phone);
  },
  data() {
    return {
      load: false,
      autologon: true,
      form: {
        user_phone: '',
        user_password: '',
        user_code: ''
      },
      timer: null,
      check: {
        exist: -1,
        mes: '手机号不符合规范'
      },
      step: 'await',
      awaitTime: 0
    };
  },
  methods: {
    import_phone(phone) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
      // eslint-disable-next-line camelcase
        const reg_phone = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1|8|9]))\d{8}$/;
        if (!reg_phone.test(phone)) {
          this.check = { exist: -1, mes: '手机号不符合规范' };
          return;
        }
        // eslint-disable-next-line consistent-return
        this.$api.get('login_isRegistered', { phone }).then((data) => {
          if (data.code !== 200) {
            return Promise.reject(data);
          }
          if (data.exist === 1) {
            this.check = { exist: 1, mes: `该手机号 ${data.nickname} 用户，可以重置。` };
          } else {
            this.check = { exist: 0, mes: '该手机号未注册，不可用于重置！' };
          }
        }).catch(() => {
          this.check = { exist: -1, mes: '网络异常，无法检测。' };
        });
      }, 500);
    },
    submitForm(formData) {
      if (!this.tcp) {
        this.$message({
          showClose: true,
          type: 'warning',
          message: '请勾选同意 《服务条款》、《隐私政策》'
        });
        return;
      }
      // eslint-disable-next-line camelcase
      const reg_phone = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1|8|9]))\d{8}$/;
      if (!reg_phone.test(formData.user_phone)) {
        this.$message({
          showClose: true,
          type: 'warning',
          message: '手机号不符合规范'
        });
        return;
      }
      if (this.check.exist === 0) {
        // `该手机号 XXX 用户，可以重置。`
        this.$message({
          showClose: true,
          type: 'warning',
          message: this.check.mes
        });
        return;
      }
      const reg = /^[\w!@#$%^&*?]{6,16}$/;
      if (!reg.test(formData.user_password)) {
        this.$message({
          showClose: true,
          type: 'warning',
          message: '密码6~16位，并且不能为空'
        });
        return;
      }
      this.getCode(formData.user_phone);
    },
    async getCode(phone) {
      const data = await this.$api.post('login_sent', { phone });
      if (data.code !== 200) {
        this.$message({
          showClose: true,
          type: 'error',
          message: data.message
        });
        return;
      }
      this.step = 'code';
      this.awaitTime = 60;
      clearInterval(this.timerTime);
      this.timerTime = setInterval(() => {
        // eslint-disable-next-line no-plusplus
        this.awaitTime--;
        if (this.awaitTime <= 0) {
          clearInterval(this.timerTime);
          this.awaitTime = 0;
        }
      }, 1000);
    },
    register(formData) {
      this.load = true;
      const submitData = {
        phone: formData.user_phone, password: formData.user_password, captcha: formData.user_code
      };
      this.disposeData(this.$api.post('login_register', submitData));
    },
    disposeData(oP) {
      oP.then((data) => {
        if (data.code !== 200) {
          this.$message({
            showClose: true,
            type: 'error',
            message: data.message
          });
          return;
        }
        this.$message({
          showClose: true,
          type: 'success',
          message: '密码重置成功'
        });
        this.$emit('logined', data);
      }).finally(() => { this.load = false; });
    }
  }
};
</script>

<style lang="scss">
.E-box-reset {
  & > .wrap-input {
    & > .el-input {
      & > input {
        border-radius: 0;
        border-bottom-width: 0;
        &:focus {
          border-color: #dcdfe6;
        }
        &:hover {
          border-color: #dcdfe6;
        }
      }
      &:first-of-type {
        & > input {
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
        }
      }
      &:last-of-type {
        & > input {
          border-bottom-width: 1px;
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
        }
      }
      .icon_state {
        &.el-icon-circle-close {
          color: #f56c6c;
        }
        &.el-icon-warning-outline {
          color: #e6a23c;
        }
        &.el-icon-circle-check {
          color: #67c23a;
        }
      }
      &.wrap-span {
        & > input {
          padding-right: 90px;
        }
        .btn-span {
          display: inline-block;
          cursor: pointer;
          width: 80px;
          color: #606266;
          border-left: 1px solid #dcdfe6;
          &:not(.await):hover {
            color: #000;
          }
          &.await {
            color: #c0c4cc;
            cursor: not-allowed;
          }
        }
      }
    }
  }
  & > .wrap-conf {
    line-height: 34px;
    padding: 0 5px;
    & > .btn {
      cursor: pointer;
      &:hover {
        color: #000;
      }
    }
    & > .btn-right {
      float: right;
    }
  }
  & > .wrap-btn {
    margin-bottom: 20px;
    & > .el-button {
      display: block;
      width: 100%;
      margin: 0;
      margin-bottom: 8px;
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
}
</style>
